<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar toutiao-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <!-- 头像上传空间 -->
    <input type="file" hidden ref="file" @change="fileChange">
    <van-cell class="avatar-cell" title="头像" @click="$refs.file.click()" is-link center>
      <van-image
        class="avatar"
        round
        fit="cover"
        :src="user.photo"
      />
    </van-cell>
    <van-cell title="昵称" @click="isUpdateNameShow=true" :value="user.name" is-link />
    <van-cell title="性别" @click="isUpdateGenderShow=true" :value="user.gender===0 ? '男':'女'" is-link />
    <van-cell title="生日" @click="isUpdateBirthdayShow=true" :value="user.birthday || '暂无'" is-link />
    <!-- /个人信息 -->

    <!-- 编辑昵称 -->
    <van-popup
      v-model="isUpdateNameShow"
      style="height:100%;background:#f4f5f6"
      position="bottom"
    >
      <update-name 
        @close="isUpdateNameShow=false"
        v-if="isUpdateNameShow"
        v-model="user.name"
      />
    </van-popup>
    <!-- /编辑昵称 -->
    <!-- 编辑性别 -->
    <van-popup
      v-model="isUpdateGenderShow"
      position="bottom"
    >
    <update-gender 
      @close="isUpdateGenderShow=false"
      v-if="isUpdateGenderShow"
      v-model="user.gender"
    />
    </van-popup>
    <!-- /编辑性别 -->
    <!-- 编辑生日 -->
    <van-popup
      v-model="isUpdateBirthdayShow"
      position="bottom"
    >
    <update-birthday 
      @close="isUpdateBirthdayShow=false"
      v-if="isUpdateBirthdayShow"
      v-model="user.birthday"
    />
    </van-popup>
    <!-- /编辑生日 -->


    <!-- 编辑头像 -->
    <van-popup
      v-model="isUpdatePhotoShow"
      position="bottom"
      style="height:100%;"
    >
      <update-photo 
        v-if="isUpdatePhotoShow"    
        @close="isUpdatePhotoShow=false" 
        @update-photo="user.photo=$event"
        :img="img" 
      />
    </van-popup>
    <!-- /编辑头像 -->

  </div>
</template>

<script>
import UpdateName from "./components/update-name"
import UpdateGender from "./components/update-gender"
import UpdateBirthday from "./components/update-birthday"
import UpdatePhoto from "./components/update-photo"
import { getUserProfile } from "@/api/user"
export default {
  name: 'UserProfile',
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto
  },
  props: {},
  data () {
    return {
      isUpdateNameShow:false,
      isUpdateGenderShow:false,
      isUpdateBirthdayShow:false,
      isUpdatePhotoShow:false,
      img:"", // 选择的文件信息，传递给子组件
      user:{}
    }
  },
  async mounted () {
     try {
       let {data:res } = await getUserProfile();
       this.user = res.data
     }catch (error) {
        this.$toast.fail('获取用户资料失败')
     }
  },
  methods: {
    // 文件更换事件
    fileChange(){
      // 文件信息
      const file = this.$refs.file.files[0];
      // 将文件信息变成预览地址
      const data = window.URL.createObjectURL(file)
      this.img = data;
      // 打开弹层
      this.isUpdatePhotoShow = true;
      // 置空input控件里面的文件信息，不然两次点击相同的文件不会触发change事件
      this.$refs.file.value = ''
    }
  }
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
      width: 60px;
      height: 60px;
    }
  }
}
</style>